import React from 'react';
import { Row, Col, Spin, Empty, Pagination, Card, Button } from 'antd';
import { ReloadOutlined, PlusOutlined } from '@ant-design/icons';
import PersonCard from './PersonCard';
import type { AIPerson, Pagination as PaginationType } from '../types';

interface PersonListProps {
  loading: boolean;
  personList: AIPerson[];
  pagination: PaginationType;
  onPageChange: (page: number) => void;
  onCardClick: (id: number) => void;
  onRefresh?: () => void;
}

// AI人员列表组件
const PersonList: React.FC<PersonListProps> = ({
  loading,
  personList,
  pagination,
  onPageChange,
  onCardClick,
  onRefresh
}) => {
  // 处理卡片点击事件
  const handleCardClick = (id: number) => {
    console.log('点击了AI人员卡片，ID:', id);
    onCardClick(id);
  };

  // 加载状态
  if (loading) {
    return (
      <div className="min-h-96 flex flex-col justify-center items-center">
        <Spin size="large" tip="正在加载AI人员数据..." />
        <p className="text-gray-500 mt-4 text-sm">请稍候，数据加载中...</p>
      </div>
    );
  }

  // 空数据状态
  if (!personList.length) {
    return (
      <Card className="min-h-96 flex flex-col justify-center items-center shadow-sm border-dashed border-2 border-gray-200">
        <Empty 
          description={
            <div className="text-center">
              <p className="text-gray-500 mb-2">暂无AI人员数据</p>
              <p className="text-gray-400 text-sm">可能是筛选条件过于严格，或数据正在更新中</p>
            </div>
          }
          image={Empty.PRESENTED_IMAGE_SIMPLE}
        >
          <div className="flex gap-2 justify-center mt-4">
            <Button 
              type="primary" 
              icon={<ReloadOutlined />}
              onClick={onRefresh}
            >
              重新加载
            </Button>
            <Button 
              icon={<PlusOutlined />}
            >
              添加AI人员
            </Button>
          </div>
        </Empty>
      </Card>
    );
  }

  return (
    <div>
      {/* 列表头部信息 */}
      <div className="flex justify-between items-center mb-6">
        <div className="flex items-center gap-3">
          <h2 className="text-xl font-semibold text-gray-800">AI人员列表</h2>
          <span className="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm font-medium">
            共 {pagination.total} 个
          </span>
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm text-gray-500">
            第 {pagination.page} 页，共 {pagination.totalPages} 页
          </span>
          <Button 
            icon={<ReloadOutlined />} 
            size="small"
            onClick={onRefresh}
            title="刷新列表"
          />
        </div>
      </div>

      {/* 响应式网格布局 */}
      <Row gutter={[20, 20]} className="mb-8">
        {personList.map((person, index) => (
          <Col
            key={person.id}
            xs={24}    // 手机：1列
            sm={12}    // 小屏：2列
            md={8}     // 中屏：3列
            lg={6}     // 大屏：4列
            xl={4}     // 超大屏：6列
            xxl={4}    // 超超大屏：6列
            className="transition-all duration-300"
            style={{ 
              animationDelay: `${index * 50}ms`,
              animation: 'fadeInUp 0.6s ease-out forwards'
            }}
          >
            <PersonCard 
              person={person} 
              onClick={handleCardClick}
            />
          </Col>
        ))}
      </Row>

      {/* 分页组件 */}
      {pagination.totalPages > 1 && (
        <Card className="shadow-sm border-0 bg-gray-50">
          <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
            <div className="text-sm text-gray-600">
              显示第 {((pagination.page - 1) * pagination.pageSize) + 1} - {Math.min(pagination.page * pagination.pageSize, pagination.total)} 条，共 {pagination.total} 条记录
            </div>
            <Pagination
              current={pagination.page}
              total={pagination.total}
              pageSize={pagination.pageSize}
              onChange={onPageChange}
              showSizeChanger={false}
              showQuickJumper
              showTotal={(total, range) => null} // 上面已经显示了，这里不重复
              className="text-center"
              size="default"
            />
          </div>
        </Card>
      )}

      {/* 添加CSS动画 */}
      <style>{`
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `}</style>
    </div>
  );
};

export default PersonList; 